<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AwesomeCo Blog</title>
	<style>
		* {
			margin: 0;
			border-style: dotted;
		}
		body {
			width: 960px;
			margin: 15px auto;
			background-color: #ccc;
		}
		p {
			margin: 0 0 20px 0;
		}
		p, li {
			line-height: 20px;
		}
		header#page_header {
			width:100%;
		}
		header#page_header nav ul, footer#page_footer nav ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		header#page_header nav ul li, footer#page_footer nav ul li {
			padding: 0;
			margin: 0 20px 0 0;
			display: inline;
		}
		li {
			float: left;
		}
		section#posts {
			float: left;
			width: 74%;
		}
		section#posts aside {
			float: right;
			width: 35%;
			margin-left: 5%;

		}

		section#sidebar {
			clear: both;
			float: right;
			width: 24%;
		}
		
		footer#page_footer {
			clear: both;
			widows: 100%;
			display: block;
			text-align: center;
		}
		
	</style>
</head>
<body>
这是body元素
<header id="page_header">
	这是页面的头部，页面只有一个头，属于固定结构，所以用一个id属性与其它部分的header区分开
	<h1>头部用h1作为网站标题</h1>
	<nav>
		<ul>
			<li>导航栏</li>
			<li>用nav表示</li>
			<li>也放在头部</li>
			<li>这里使用</li>
			<li>平铺的ul标记</li>
		</ul>
	</nav>
</header>
<section id="posts">
	这是页面内容部分用section将内容分区，将网页内容归类，这是主要内容部分，放置博客内容
	<header>这是页面结构部分的头</header>
	<article class="post">
		开始一个article部分，表示一篇博客
		<header>这是一篇文章的头</header>
		<p>这里显示博客作者和时间等</p>
		<aside>这是文章相关内容或定义等补充内容，用aside在一边显示</aside>
		<p>文章正文段落,这个内容需要多一点才能显示出旁注的效果。注意，旁注的宽度为35%，是相对于它的父元素article的。文章正文段落,这个内容需要多一点才能显示出旁注的效果。注意，旁注的宽度为35%，是相对于它的父元素article的。文章正文段落,这个内容需要多一点才能显示出旁注的效果。注意，旁注的宽度为35%，是相对于它的父元素article的。文章正文段落,这个内容需要多一点才能显示出旁注的效果。注意，旁注的宽度为35%，是相对于它的父元素article的。文章正文段落,这个内容需要多一点才能显示出旁注的效果。注意，旁注的宽度为35%，是相对于它的父元素article的。</p>
		<p>文章正文段落</p>

		<footer>这是文章的尾部</footer>
	</article>
	<article class="post">
		这是另一个article
		<header>文章的头header</header>
		<p>文章的内容</p>
		<p>这个没有用aside</p>
		<p>对于已知最大/小的数值范围，可用meter元素对其上的一点进行描述。注意不能用来说明重量，身高等没有范围的数值。如下： </p>
		<meter title="USD" id="pledge_goal" value="2500" min="0" max="5000">$2500.00</meter>
		<footer>文章的脚</footer>
	</article>
	<footer>页面主要内容的脚</footer>
</section>
<section id="sidebar">
	这是页面内容部分用section将内容分区，这是辅助部分，放在一边
	<header>辅助部分的头</header>
	<nav>辅助部分的导航链接列表</nav>
</section>
<footer id="page_footer">这是页面尾部，用id=page_footer标识，注意用clear属性来消除前面的浮动属性定义的影响</footer>
</body>
</html>